<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--使用自定义组件，v-bind绑定每个数据给自定义组件的props中，template去输出-->
    <!--v-bind将集合中的每一个对象，将每个对象的值绑定给lx，props中接受参数lx，再通过template去输出-->
    <zidingyizujian v-for="list in lists" v-bind:lx="list">

    </zidingyizujian>
</div>
<script>
    <!--定义一个vue组件-->
    Vue.component("zidingyizujian",{
        props:['lx'],
        template:'<li>{{lx}}</li>'
    });
    const vm = new Vue({
        el: "#app",
        data: {
            lists: [
                'list1',
                'list2',
                'list3'
            ]
        }
    });
</script>


<!--自定义组件-->
<!--<div id="app">-->
<!--    <zidingyititle v-bind:enen="titleName"></zidingyititle>-->
<!--    <ul>-->
<!--        <li>cf</li>-->
<!--        <li>wangzhe</li>-->
<!--    </ul>-->
<!--</div>-->
<!--<script>-->
<!--    Vue.component("zidingyititle",{-->
<!--        props:['enen'],-->
<!--        template:'<h1>{{enen}}</h1>'-->
<!--    });-->
<!--    const vm = new Vue({-->
<!--        el: "#app",-->
<!--        data: {-->
<!--            titleName: 'lxx'-->
<!--        }-->
<!--    });-->

<!--</script>-->
</body>
</html>
